<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" mode="aspectFit" style="width: 100rpx;
	height: 100rpx;"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
	<view>
		<view>{{ nmuber + 1}}</view>
		<view>{{ ok ? 'yes' : 'no'}}</view>
		<view>{{ message.split('').reverse().join('')}}</view>
		</view>
		<view v-for="item in arr" style="color:#ff0000">
			{{item}} for(int i;i<10;i++)
		</view>
		
		
		
		
		<view v-for="(item,index) in 4" style="color: #00ff00;">
			<view :class="'list-' + index%2">{{index%2}}</view>
		</view>
		
		<view v-for="(item,index) in 4" style="color: #0000ff;">
		<view :class="'list-' + index%2">{{index%2}}</view>
		</view>
		
		<view v-for="(value,name,index) in object">
			{{ index }}.{{ name }}:{{ value }}
		</view>
		
		<view v-for="item in arr" :key="item.id">
			<view style="color: #333300;">{{item.id}}:{{item.name}}</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				number: 1,
				ok: true,
				message: 'Hello Vue!',
				arr: [
					{id: 1,name: '123'},
					{id: 2,name: '111'},
					{id: 3,name: '222'},
					{id: 4,name: '333'},
					],
					Object:{
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2020-04-10'
					}
			}
		},
		onLoad(){
			
		},
		methods: {
			handleClic() {
				uni.showToast({
					title: '你点击了按钮',
					icon:'none'
				});
			}

		}
	}
</script>

<style>
	.list-0{
		color: aqua;
		font-size: 35rpx;
	}
	.list-1{
		color: brown;
		font-size: 20rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
</style>